<template>
    <div class="mainDiv" style="padding: 10px; box-sizing: border-box;">
        <div class="rowHead">
            <el-input v-model="filter.keywords" placeholder="请输入关键字" class="searchArea" @keyup.enter.native="getmsg">
                <el-button slot="append" icon="search" type="primary" @click="getmsg">查找</el-button>
            </el-input>
        </div>
        <el-table :data="goodslist" height="100%" @row-click="selectRow" @row-dblclick="goback" :row-class-name="tableRowClassName">
            <el-table-column prop="selected" label="选择" width="100">
                <template scope="scope">
                    <el-switch v-model="scope.row.selected"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="项目名称">
            </el-table-column>
            <el-table-column prop="cardname" label="所属卡">
            </el-table-column>
            <el-table-column prop="cardtype" label="卡类别">
                <template scope="scope">
                    <el-tag v-if="scope.row.cardtype == 1" type="primary" close-transition>期卡</el-tag>
                    <el-tag type="success" close-transition v-if="scope.row.cardname != null && scope.row.cardtype == 2">疗程卡</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="nownum" label="剩余次数">
                <template scope="scope">
                    <span v-if="scope.row.cardtype == 1">不限</span>
                    <span v-else>{{scope.row.nownum}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="amount" label="剩余卡耗">
            </el-table-column>
            <el-table-column prop="endtime" label="有效期">
                <template scope="scope">
                    <span v-if="scope.row.cardtype == 1">{{time(scope.row.endtime)}}</span>
                    <span v-else>用完为止</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="rowHead">
            <el-col :span="12">
                <el-pagination @current-change="changecurrent" :current-page="filter.currentpage" layout="total, prev, pager, next" :total="total" :page-size="filter.pagesize">
                </el-pagination>
            </el-col>
            <el-col :span="12">
                <el-button style="float:right;margin-left: 5px" size="mini" type="success" icon="check" @click="goback">确定选择</el-button>
                <el-button style="float:right;" size="mini" type="danger" icon="close" @click="closeWindow">取消关闭</el-button>
            </el-col>
        </div>
    </div>
</template>
<script>
import C from '#/src/common/common.js'

export default {
    name: 'guestSubjectPopup',
    data() {
        return {
            goodslist: [],
            total: 0,
            selectrow: {},
            filter: {
                pagesize: 30,
                isdisabled: 0,
                currentpage: 1,
                cardid: '',
                guestid: '',
                keywords: ''
            }
        }
    },
    methods: {
        changecurrent: function(val) {
            this.filter.currentpage = val
            this.getmsg()
        },
        getmsg: async function() {
            let data = await C.ajax('/shop/popup/getguestcardsubjectlist', { filter: JSON.stringify(this.filter) }, 'post')
            if (data) {
                this.total = data.count
                this.checkselect(data.data)
            }
        },
        selectRow: function(row, event, column) {
            event.preventDefault()
            this.selectrow = row
            this.checkselect(this.goodslist)
        },
        tableRowClassName: function(row, index) {
            if (row.selected) return 'info-row'
        },
        // 计算是否选择
        checkselect: function(data) {
            if (data.length > 0) {
                data.forEach((row, index) => {
                    data[index].selected = row.id == this.selectrow.id ? true : false
                })
                this.goodslist = data
            }
        },
        goback: function() {
            C.closeBrowserWindow(this.selectrow)
        },
        closeWindow: function() {
            C.closewin()
        },
        time: function(unix) {
            let tm = new Date(unix * 1000)
            let yy = tm.getFullYear()
            let mm = tm.getMonth() < 9 ? '0' + (tm.getMonth() + 1) : tm.getMonth() + 1
            let dd = tm.getDate() < 10 ? '0' + tm.getDate() : tm.getDate()
            return yy + '-' + mm + '-' + dd
        }
    },
    mounted: function() {
        let data = C.getDatas()
        if (data) {
            this.filter.keywords = data.filter.keywords
            this.filter.guestid = data.filter.guestid
            if (data.data && data.data.data) {
                this.checkselect(data.data.data)
                this.total = data.data.count
            } else {
                this.getmsg()
            }
        } else {
            this.getmsg()
        }
    }
}
</script>